<template>
  <view class="wrapper">
    <view class="report-list">
      <navigator
        class="report-item"
        v-for="(item, index) in decorationList"
        :key="index"
        :url="`/pages/chutuDetail/index?id=${item.id}`"
      >
        <view>出土人姓名：{{ item.name || '--' }}</view>
        <view>出土原因：{{ item.reason || '--' }}</view>
        <view>清运时间：{{ item.time || '--' }}</view>
        <view>出土方量：{{ item.soilNum || '--' }}</view>
        <view @click.stop="handleOpenAddress(item)">
          出土位置： <text :class="{ address: item.gis }">{{ item.address || '--' }}</text>
        </view>
      </navigator>
    </view>
    <view class="footer">
      <navigator class="btn" url="/pages/chutu/index">我要出土</navigator>
    </view>
  </view>
</template>

<script>
import { listDecoration } from '@/api';
export default {
  data() {
    return {
      decorationList: [],
    };
  },

  onLoad() {
    this.query();
  },

  methods: {
    query() {
      listDecoration().then((res) => {
        this.decorationList = res.rows || [];
      });
    },

    handleOpenAddress(item) {
      const [longitude, latitude] = item.gis.split(',');
      uni.openLocation({ latitude: Number(latitude), longitude: Number(longitude), address: item.address });
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/uni.less';
.wrapper {
  padding: 24rpx 24rpx calc(24rpx + 30rpx + 100rpx + 30rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  .report-list {
    .report-item {
      position: relative;
      margin-top: 24rpx;
      padding: 32rpx;
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 0 20rpx 4rpx #f1f1f1;
      line-height: 48rpx;
      &:first-child {
        margin-top: 0;
      }
      .address {
        text-decoration: underline;
        color: @uni-color-primary;
      }
    }
  }
}
</style>
